<template>
    <div class="assessment-form">
        <h2 class="title">入院评估单</h2>
        <div class="patient-info">
            <span>姓名: 杜云岚</span>
            <span>性别: 男</span>
            <span>年龄: 74岁</span>
            <span>科别: 神经外科</span>
            <span>床号: 03</span>
            <span>病案号: 0001657</span>
        </div>
        <el-form :model="formData" label-width="100px">
            <el-form-item label="入院转入方式">
                <el-radio-group v-model="formData.admissionType">
                    <el-radio label="步行">步行</el-radio>
                    <el-radio label="轮椅">轮椅</el-radio>
                    <el-radio label="平车">平车</el-radio>
                    <el-radio label="其他">其他</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="意识">
                <el-radio-group v-model="formData.consciousness">
                    <el-radio label="清醒">清醒</el-radio>
                    <el-radio label="嗜睡">嗜睡</el-radio>
                    <el-radio label="模糊">模糊</el-radio>
                    <el-radio label="昏睡">昏睡</el-radio>
                    <el-radio label="昏迷">昏迷</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="语言表达">
                <el-radio-group v-model="formData.languageExpression">
                    <el-radio label="正常">正常</el-radio>
                    <el-radio label="含糊不清">含糊不清</el-radio>
                    <el-radio label="失语">失语</el-radio>
                    <el-radio label="不能表达">不能表达</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="活动能力">
                <el-radio-group v-model="formData.activityAbility">
                    <el-radio label="行动正常">行动正常</el-radio>
                    <el-radio label="协助活动">协助活动</el-radio>
                    <el-radio label="使用助行器">使用助行器</el-radio>
                    <el-radio label="残肢">残肢</el-radio>
                    <el-radio label="卧床">卧床</el-radio>
                    <el-radio label="其他">其他</el-radio>
                    <el-radio label="跌倒高危">跌倒高危</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="视力情况">
                <div class="vision-hearing-group">
                    <span class="sub-label">左眼</span>
                    <el-radio-group v-model="formData.visionLeft">
                        <el-radio label="清晰">清晰</el-radio>
                        <el-radio label="失明">失明</el-radio>
                        <el-radio label="模糊">模糊</el-radio>
                    </el-radio-group>
                    <span class="sub-label">右眼</span>
                    <el-radio-group v-model="formData.visionRight">
                        <el-radio label="清晰">清晰</el-radio>
                        <el-radio label="失明">失明</el-radio>
                        <el-radio label="模糊">模糊</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="听力情况">
                <div class="vision-hearing-group">
                    <span class="sub-label">左耳</span>
                    <el-radio-group v-model="formData.hearingLeft">
                        <el-radio label="清晰">清晰</el-radio>
                        <el-radio label="失聪">失聪</el-radio>
                        <el-radio label="模糊">模糊</el-radio>
                    </el-radio-group>
                    <span class="sub-label">右耳</span>
                    <el-radio-group v-model="formData.hearingRight">
                        <el-radio label="清晰">清晰</el-radio>
                        <el-radio label="失聪">失聪</el-radio>
                        <el-radio label="模糊">模糊</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="营养状况">
                <el-radio-group v-model="formData.nutritionStatus">
                    <el-radio label="正常">正常</el-radio>
                    <el-radio label="肥胖">肥胖</el-radio>
                    <el-radio label="消瘦">消瘦</el-radio>
                    <el-radio label="恶病质">恶病质</el-radio>
                </el-radio-group>
                <el-icon class="trash-icon" @click="handleDelete">
                    <Delete />
                </el-icon>
            </el-form-item>
            <el-form-item label="排泄" class="dashed-box">
                <div class="excretion-group">
                    <span class="sub-label">小便</span>
                    <el-radio-group v-model="formData.urine">
                        <el-radio label="正常">正常</el-radio>
                        <el-radio label="失禁">失禁</el-radio>
                        <el-radio label="尿频">尿频</el-radio>
                        <el-radio label="尿潴留">尿潴留</el-radio>
                        <el-radio label="留置导尿管">留置导尿管</el-radio>
                    </el-radio-group>
                    <span class="sub-label">大便</span>
                    <el-radio-group v-model="formData.stool">
                        <el-radio label="正常">正常</el-radio>
                        <el-radio label="失禁">失禁</el-radio>
                        <el-radio label="腹泻">腹泻</el-radio>
                        <el-radio label="便秘">便秘</el-radio>
                        <el-radio label="肠造口">肠造口</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="签名">
                <div class="handwriting-signature" contenteditable="true">
                    <!-- 模拟手写签名，点击可编辑 -->
                </div>
            </el-form-item>
            <el-form-item class="form-actions">
                <el-button type="primary" @click="save">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { Delete } from '@element-plus/icons-vue';
import router from '@/router';

const formData = ref({
    admissionType: '',
    consciousness: '',
    languageExpression: '',
    activityAbility: '',
    visionLeft: '',
    visionRight: '',
    hearingLeft: '',
    hearingRight: '',
    nutritionStatus: '',
    urine: '',
    stool: ''
});

const save = () => {
    console.log('保存表单数据', formData.value);
    // 实际开发中发送请求保存数据
};

const cancel = () => {
    console.log('取消操作');
    // 可重置表单等操作
    router.push({ path: '/InAssess' });
};

const handleDelete = () => {
    console.log('删除当前记录');
    // 删除逻辑
};
</script>

<style scoped>
.title {
    text-align: center;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: bold;
}

.patient-info {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.patient-info span {
    margin: 5px 10px;
    white-space: nowrap;
}

.assessment-form {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.el-form-item {
    margin-bottom: 15px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
}

.el-form-item__label {
    font-weight: bold;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.vision-hearing-group {
    display: flex;
    gap: 20px;
    align-items: baseline;
}

.sub-label {
    width: 60px;
    display: inline-block;
}

.excretion-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.trash-icon {
    margin-left: 10px;
    color: #909399;
    cursor: pointer;
    font-size: 14px;
    vertical-align: middle;
}

.trash-icon:hover {
    color: #f56c6c;
}

.dashed-box {
    border: 1px dashed #ccc;
    padding: 10px;
    border-radius: 4px;
}

.form-actions {
    text-align: right;
    border-bottom: none;
    padding-top: 10px;
}

.handwriting-signature {
    border: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 4px;
    cursor: pointer;
    user-select: text;
}
</style>